<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <body>
        <!-- 对对象进行侦听 -->
        <div id="app">
        <p>{{ obj.name }} --- {{ obj.age }} --- {{ obj.height }}</p >
            <button @click = "obj.name ='rose'">修改obj的name属性</button>
            <button @click = "obj.age = 30">修改obj的age属性</button>
            <button @click = "obj = {name:'andy',age:99}">修改obj的指向</button>
        </div>
        <script src="../../vue.js"></script>
        <script>
        new Vue({
            el:'#app', 
            data:{
                obj:{
                    name:'jack', 
                    age:16, 
                    height:175
        }
    },
        watch:{
        // 这种写法侦听不到obj对象内部属性的变化，
        // 只能侦听到obj对象指向的变化。
        // obj(){
        //	console.log('obj变化了');	
        // },
        // 如果想侦听到对象里属性的变化.
        // 侦听obj里name的变化(要记得加引号)
        // "obj.name"(){
        //	console.log('name变化了');	
        // },

        // 可是这样写只能侦听一个属性。
        //如果希望侦听到对象里所有属性的变化,就要开启深度侦听。 
        obj:{
            // 当有变化会调用的函数 
            handler(){
                console.log('obj的属性变化了');
            },
            // 开启深度侦听
            // deep:true,
            // 要不要当前页面一打开就立即调用handler函数。
            // 给true表示立即调用,默认是flase。(代表只有改动了才调用
            // immediate:true
            }
        }
    })
</script>
</body>
</html>